//员工列表
//获取列表
obtain()
let listDataS = [];

function obtain() {
  $.ajax({
    url: 'http://localhost:8089/api/list_page',
    type: 'get',
    data: {
      pageNo: $('#min').text() || 1, //当前页号 
      pageSize: 10 //每页记录条数
    },
    success: function (data) {
      paging(data.resultInfo);
      let listData = data.resultInfo.list;
      for (let i = 0; i < listData.length; i++) {
        listDataS.push(listData[i])
      }
      let set = '';
      set = `
              <tr>
                  <th style="width: 60px;"><input type="checkbox" class="checkbox-all">全选</th>
                  <th style="width: 50px;">序号</th>
                  <th style="width: 100px;">姓名</th>
                  <th>头像</th>
                  <th style="width: 50px;">年龄</th>
                  <th style="width: 50px;">性别</th>
                  <th style="width: 50px;">学历</th>
                  <th style="width: 150px;">毕业院校</th>
                  <th style="width: 555px;">访问目的</th>
                  <th style="width: 230px;">访问时间</th>
                  <th colspan="2" style="width: 200px;">操作</th>
              </tr>
      `
      for (let i = 0; i < listData.length; i++) {
        set += `
        <tr>
            <td> <input type="checkbox" class="checkbox-item"></td>
            <td>${i+1}</td>
            <td>${listDataS[i].username}</td>
            <td><img src='${listDataS[i].headerimg}'></td>
            <td>${listDataS[i].age}</td>
            <td>${sex(listDataS[i].sex)}</td>
            <td>${listDataS[i].education}</td>
            <td>${listDataS[i].company}</td>
            <td>${listDataS[i].visitgoal}</td>
            <td>${time(listDataS[i].visittime)}</td>
            <td><a href="#" onclick="deleteData(${i})">删除</a> </td>
            <td><a href="#" onclick="editForm(${i})">编辑</a></td>
        </tr>
        `
      }
      $('tbody').html(set)
      topForm()
    }
  })
  // 性别转换
  function sex(data) {
    if (data == 1) {
      return '男'
    } else if (data == 0) {
      return '女'
    } else {
      return '人妖'
    }
  }
  // 时间转换
  function time(data) {
    let arr = [];
    let str = '';
    let imgFoem = data;
    if (data === null) {
      return '空'
    } else {
      for (let i = 0; i < imgFoem.length; i++) {
        if (imgFoem.charAt(i) == '-' || imgFoem.charAt(i) == 'T' || imgFoem.charAt(i) == '.') {
          arr.push(str)
          str = '';
        } else {
          str = str + imgFoem.charAt(i)
        }
      }
      return `${arr[0]}年${arr[1]}月${arr[2]}日&nbsp;&nbsp;&nbsp;${arr[3]}`;
    }
  }
}

// 表格头部
function topForm() {
  let foemW = '' + $('tbody').css('width');
  $('.topBtn').attr('width', foemW)
}
// 打开添加表单
function openForm() {
  fileBtn()
  $('.employeeForm h1 span').text('添加访客')
  $('.employeeForm').css('display', 'block');

  $('#submit').on('click', function () {
    let usernameFoem = $('#username').val(); //姓名
    let ageFoem = $('#age').val(); //年龄
    let visittimeFoem = $('input[type="datetime-local"]').val(); //到访时间
    let companyFoem = $('#company').val(); //单位
    let sexForm = $('input[name="sex"]:checked').val(); //性别
    let selectFoem = $('select').val() // 学历
    let visitgoalForm = $('#visitgoal').val(); //来访目的

    console.log(usernameFoem,imgSrc(),ageFoem,time(visittimeFoem),companyFoem,sexForm,selectFoem,visitgoalForm)

    $.ajax({
      url: 'http://localhost:8089/api/add',
      type: 'post',
      data: {
        username: usernameFoem, // 姓名
        headerimg: imgSrc(), // 头像
        age: ageFoem, // 年龄
        visittime: time(visittimeFoem), // 到访时间
        company: companyFoem, // 单位
        sex: sexForm, // 性别 男0 女1
        education: selectFoem, // 学历
        visitgoal: visitgoalForm, // 来访目的
      },
      success: function (data) {
        let result = data.resultCode
        if (result == 1) {
          alert('成功添加！')
        } else {
          alert('添加失败')
        }
      }
    })
    listDataS = []; //清空数据
    obtain()
    closeForm()
  })
  // 时间拼接 2021-07-08T11:29 - 2021-01-21T11:13:54.000Z
  function time(data) {
    return `${data}`;
  }
  
}
// 打开编辑表单
function editForm(id) {
  fileBtn(time(listDataS[id].visittime))
  console.log()
  $('#username').val(listDataS[id].username); //名字
  $('#img').attr('src', listDataS[id].headerimg) //头像
  $('#age').val(listDataS[id].age); //年龄
  $('#visittime').val(time(listDataS[id].visittime)); //到访时间
  $('#oldprice').val(listDataS[id].oldprice); //原价
  $('#company').val(listDataS[id].company); // 单位
  $('input[name="sex"]').val(listDataS[id].company); // 性别
  $('select').val(listDataS[id].education);//学历
  $('#visitgoal').val(listDataS[id].visitgoal); //来访目的 

  $('.employeeForm h1 span').text('编辑访客')
  $('.employeeForm').css('display', 'block');
  $('#submit').click(function () {
    let titName = $('.employeeForm h1 span').text()
    alert(titName)

    listDataS = []; //清空数据
    obtain()
    closeForm()
  })
  function time(data) {
    let arr = [];
    let str = '';
    let imgFoem = data;
    if (data === null) {
      return '空'
    } else {
      for (let i = 0; i < imgFoem.length; i++) {
        if (imgFoem.charAt(i) == '-' || imgFoem.charAt(i) == 'T' || imgFoem.charAt(i) == '.') {
          arr.push(str)
          str = '';
        } else {
          str = str + imgFoem.charAt(i)
        }
      }
      console.log(arr)
      return `${arr[0]}-${arr[1]}-${arr[2]} ${arr[3]}`;
    }
  }

}

// 关闭表单
function closeForm() {
  $('.employeeForm').css('display', 'none');
  $('#submit').off('click')

  $('#username').val('');
  $('#age').val('');
  $('#visittime').val('');
  $('#company').val('');
  $('input[name="sex"]').val('');
  $('select').val('高中');
  $('#img').attr('src', '');
  $('#visitgoal').val('');

}

// 提交数据
function SubmitData(num) {
  console.log('开始', num)
}
// 图片地址拼接
function imgSrc() {
  let arr = [];
  let str = '';
  let imgFoem = $('#imgBtn').val();
  for (let i = 0; i < imgFoem.length; i++) {
    if (imgFoem.charAt(i) != '\\') {
      str = str + imgFoem.charAt(i)
    } else {
      arr.push(str)
      str = '';
    }
  }
  return str = `../../static/index/${str}`;
}
// 图片预浏览
function fileBtn() {
  $('#imgBtn').change((e) => {
    var picObj = e.target.files[0] //选中的图片对象
    var fileReader = new FileReader() //创建文件读对象
    fileReader.readAsDataURL(picObj) // 读取计算朵中选中文件
    //文件读取完成后执行
    fileReader.onload = function (picDataObj) {
      $('#img').attr('src', picDataObj.target.result)
    }
  })
}
// 删除数据
function deleteData(num) {
  let idData = listDataS[num].uid;
  $.ajax({
    url: 'http://localhost:8089/api/delete',
    type: 'get',
    data: {
      uid: idData,
    },
    success: function (data) {
      let result = data.resultCode;
      if (result == 1) {
        alert('成功！')
        listDataS = []; //清空数据
        obtain()
      } else {
        alert('失败！')
      }
    }
  })
}
// 分页
function paging(data) {
  let currentNo = data.currentNo;
  let totalNum = data.totalNum;
  $('#min').html(currentNo)
  $('#max').html(totalNum)
}


$('#plusnum').click(function () {
  let min = $('#min').text();
  let max = $('#max').text();
  let num = parseInt(min) + 1
  if (min < max) {
    $('#min').text(num)
    listDataS = []; //清空数据
    obtain()
  } else(
    min = max
  )
})
// 减 reduce
$('#reduce').click(function () {
  let min = $('#min').text();
  let num = parseInt(min) - 1
  if (min > 1) {
    $('#min').text(num)
    listDataS = []; //清空数据
    obtain()
  } else(
    min = 1
  )
})